<template>
  <div class="comprehensive-report">
    <div class="segment-demand">
      <BasicTitle :title="t('custom.今日细纱换段需求')"></BasicTitle>
      <span class="span-str" v-html="guaShuStr"></span>
      <BandingSegmentPrediction
        ref="refBanding"
        showAll="today"
        @updateStr="(str) => (guaShuStr = str)"
      ></BandingSegmentPrediction>
    </div>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption"></BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRefDetail" v-bind="gridOptionDetail"></BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRefChain" v-bind="gridOptionChain"></BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import {
    FullBobbinTableColumns,
    ComprehensiveDetailTableColumns,
    ChainsTableColumns
  } from '../../data'
  import { getCuXiLianZongHeXinXi } from '@/api/shengChanJianShi'

  import BandingSegmentPrediction from '../../../businessComponents/bandingSegmentPrediction.vue'

  const props = defineProps<{
    statusCode: string
  }>()

  const { t } = useI18n()
  const guaShuStr = ref('')

  const gridOption = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.满管链条'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `comprehensive-full-bobbin-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 450,
    columns: FullBobbinTableColumns
  })

  const gridOptionDetail = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.粗纱机台车面详情'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `comprehensive-detail-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 450,
    columns: ComprehensiveDetailTableColumns
  })

  const gridOptionChain = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.空管链条') + ' + ' + t('custom.尾纱链条'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `comprehensive-chain-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 450,
    columns: ChainsTableColumns
  })

  const getInfo = () => {
    getCuXiLianZongHeXinXi().then((res: any) => {
      gridOption.data = res.fullSpinning.map((item) => {
        return {
          ...item,
          yarnLength: item.yarnLength == null ? 0 : Math.round(item.yarnLength * 100) / 100,
          pipeChangedCnt:
            item.pipeChangedCnt == null ? 0 : Math.round(item.pipeChangedCnt * 100) / 100,
          fullPipeCntInCs:
            item.fullPipeCntInCs == null ? 0 : Math.round(item.fullPipeCntInCs * 100) / 100
        }
      })
      gridOptionDetail.data = res.railMetaRealInfoDetail.map((item) => {
        const progress =
          Math.round((item.clearedCntInWs / (item.unClearCntInWs + item.clearedCntInWs)) * 10000) /
          100
        return {
          ...item,
          progress: isNaN(progress) ? '' : progress + '%'
        }
      })
      gridOptionChain.data = res.emptyAndTailSpinning.map((item) => {
        const progress =
          Math.round((item.clearedCntInWs / (item.unClearCntInWs + item.clearedCntInWs)) * 10000) /
          100
        return {
          ...item,
          // unClearCntInWs:
          //   item.unClearCntInWs == null ? null : Math.round(item.unClearCntInWs * 1) / 1,
          // clearedCntInWs:
          //   item.clearedCntInWs == null ? null : Math.round(item.clearedCntInWs * 100) / 100,
          progress: isNaN(progress) ? '' : progress + '%'
        }
      })
    })
  }

  const clearTimeSet = ref()
  const refBanding = ref()
  onMounted(() => {
    getInfo()
    clearTimeSet.value = setInterval(() => {
      getInfo()
      refBanding.value.getInfoList()
    }, 60000)
  })

  onUnmounted(() => {
    clearInterval(clearTimeSet.value)
  })
</script>
<style scoped lang="scss">
  .segment-demand {
    position: relative;
    box-sizing: border-box;
    padding: 20px 20px 0;
    background-color: #fff;

    .basic-title {
      margin-bottom: 30px;
    }

    .span-str {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #202121;
    }
  }
</style>
